<template>
	<div class="root-container">
		<div class="bcon3">
			<div class="but" @tap="goToreport">
				<image src="/static/report.png" class="pic3"></image>
				<div class="word4">事件上报</div>
			</div>
			<div class="daf">
				<div class="draft" @tap="goToTraft()">
					<div class="pic4">
						<image src="/static/left.png" class="pic5"></image>
					</div>
					<div class="w">草稿箱</div>
				</div>
				<div class="draft">
					<div class="pic4">
						<image src="/static/right.png" class="pic5"></image>
					</div>
					<div class="w">立案审批</div>
				</div>
			</div>
			<div class="bc3">
				<div class="bc2">
					<div class="but2">
						<div class="sit2">未结案</div>
						<div class="tip"></div>
					</div>
				</div>
				<div class="bc2">
					<div class="but2">
						<div class="sit2">未结案</div>
					</div>
				</div>
			</div>
		</div>
		<div class="b3">
			<div class="e" @tap="goToxq">
				<div class="w3">
					创建于2025.9.14
				</div>
				<div class="xian"></div>
				<div class="r2">
					<div class="lx">
						<div class="bw">
							打架斗殴
						</div>
						<div class="gw">
							突发事件类型
						</div>
					</div>
					<div class="sf">
						<div class="bw">
							是
						</div>
						<div class="gw">
							是否报送心理健康中心
						</div>
					</div>
					<div class="sum2">
						<div class="bw">
							9
						</div>
						<div class="gw">
							涉及学生人数
						</div>
					</div>
				</div>
				<div class="c2">
					<div class="hui">
						突发事件概述
					</div>
					<div class="he">
						打架斗殴
					</div>
				</div>
				<div class="id">
					事件ID:072107210721
				</div>
			</div>
			
			
			<div class="e">
				<div class="w3">
					创建于2025.9.14
				</div>
				<div class="xian"></div>
				<div class="r2">
					<div class="lx">
						<div class="bw">
							打架斗殴
						</div>
						<div class="gw">
							突发事件类型
						</div>
					</div>
					<div class="sf">
						<div class="bw">
							是
						</div>
						<div class="gw">
							是否报送心理健康中心
						</div>
					</div>
					<div class="sum2">
						<div class="bw">
							9
						</div>
						<div class="gw">
							涉及学生人数
						</div>
					</div>
				</div>
				<div class="c2">
					<div class="hui">
						突发事件概述
					</div>
					<div class="he">
						打架斗殴
					</div>
				</div>
				<div class="id">
					事件ID:072107210721
				</div>
			</div>
		
			
		</div>
		
		
		
		
		<div class="bottom-bar">
		        <!-- 事件报告按钮 -->
		        <div class="action-button" @click="handleReportClick">
		            <div class="icon-container">
		                <!-- 预留事件报告图标位置 -->
		                <image src="/static/xiaz.png" class="p2"></image>
		            </div>
		            <div class="button-text">事件报告</div>
		        </div>
		        
		        <!-- 更多功能按钮 -->
		        <div class="action-button" @click="handleMoreClick">
		            <div class="icon-container">
		                <!-- 预留事件报告图标位置 -->
		                <image src="/static/xiay.png" class="p2"></image>
		            </div>
		            <div class="button-text">更多功能</div>
		        </div>
		    </div>
	</div>

</template>

<script>

export default 
{
	methods: 
	{
		goToTraft() 
		{
			console.log('草稿箱被点击了！！！');
			uni.navigateTo({url: '/pages/traft/traft'});
		},
		goToxq()
		{
			console.log('事件被点击了！！！');
			uni.navigateTo({url: '/pages/traft/sub'});
		},
		goToreport() 
		{
			console.log('事件上报被点击了！！！');
			uni.navigateTo({url: '/pages/report/report'});
		}
	}
}
//Hello World!
</script>
<style>
	.id
	{
		margin-left: 22rpx;
		margin-top: 14rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 24rpx;
		text-align: left;
		color: #808080;
	}
	.he
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 24rpx;
		margin-top: 10rpx	;
		margin-left: 20rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.hui
	{
		margin-top: 12rpx;
		margin-left: 20rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 24rpx;
		text-align: left;
		color: #808080;
	}
	.c2
	{
		padding-top: 1rpx; /* 极小的内边距即可避免折叠 */
		margin-left: 22rpx;
		width: 648rpx;
		height: 102rpx;
		border-radius: 12rpx;
		background: #f5f5f5;
	}
	.gw
	{
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 24rpx;
		text-align: center;
		color: #808080;
	}
	.bw
	{
		margin-top: 5rpx;
		color: #1a1a1a;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 700;
		letter-spacing: 0;
	}
	.sum2
	{
		margin-left: 50rpx;
		width: 144rpx;
		height: 76rpx;
		background: transparent;
		/* background-color: #5BCEFA; */
		  
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.sf
	{
		margin-left: 52rpx;
		width: 240rpx;
		height: 76rpx;
		background: transparent;
		/* background-color:white; */
		
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lx
	{
		width: 144rpx;
		height: 76rpx;
		background: transparent;
		/* background-color: #F7A8B8; */
		
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.r2
	{
		display: flex;
		margin-left: 28rpx;
		margin-top: 25rpx;
		width: 630rpx;
		height: 76rpx;
		background: transparent;
	}
	.xian
	{
		margin-left: 13rpx;
		width: 654rpx;
		background: transparent;
		border: 1rpx solid #dbdbdb;
	}
	.w3
	{
		margin-left: 40rpx;
		margin-top: 20rpx ;
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 28rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.e
	{
		
		margin-top: 16rpx;
		width: 688rpx;
		height: 310rpx;
		border-radius: 12rpx;
		background: white;
		box-shadow: 0 4rpx 8rpx #e6e6e64d;
	}
	.b3
	{
		width: 100%;
		background: #f2f4f7;
		display: flex;
		flex-direction: column;
		/* 		justify-content: center; */
		align-items: center;
	}
	.p2
	{
		width: 50rpx;
		height: 44rpx;
	}
	.tip
	{
		width: 84rpx;
		height: 6rpx;
		background: #fff;
		
	}
	.sit2
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 34rpx;
		text-align: left;
		margin-top: 0;
		/* hello world */
		color: #fff;
	}
	.but2
	{
		height: rpx;
		width: 105rpx;
		background-color: ;
	}
	.bc2
	{
		height: 50rpx;
		margin-top: 32rpx;
		width:210rpx;
		    align-items: flex-start;

		display: flex;
		/* background: pink; */
	}
	.bc3
	{
		margin-left: 32rpx;
		display: flex;
		width: 100%;
	}
	.w
	{
		margin-left: 60rpx;
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 32rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.pic5
	{
		margin-left: 30rpx;
		width: 108rpx;
		height: 108rpx;
		background: transparent;
	}
	.pic4
	{
		width: 108rpx;
		height: 108rpx;
		background: transparent;
	}
	.draft
	{
		display: flex;
		align-items: center; /* 核心属性，控制垂直对齐 */
		border-radius: 10rpx;
		width: 330rpx;
		height: 150rpx;
		background: #fff;
		filter: drop-shadow(0 4rpx 8rpx #00000014);
	}
	.daf
	{
		display: flex;
		align-items: center;
		justify-content: space-between; /* 关键：让子元素两端对齐并自动分配间距 */
		margin-top: 20rpx;
		width: 688rpx;
		height: 160rpx;
/* 		background-color: pink; */
	}
	.word4
	{
		font-family: "PingFang SC Heavy";
		font-weight: 900;
		font-size: 36rpx;
		margin-left: 30rpx; 
		text-align: left;
		color: #743600;
	}
	.pic3
	{
		margin-left: 170rpx;
		border-radius: 50%;
		width: 108rpx;
		height: 108rpx;
		background: #ff7600;
		opacity: 0.34;
		justify-content: center;
		
	}
	.but
	{
		display: flex;
		align-items: center; /* 核心属性，控制垂直对齐 */
		width: 688rpx;
		height: 152rpx;
		border-radius: 12rpx;
		background: linear-gradient(144.19deg, #ffe990 0%, #ffb341 100%);
		border: 6rpx solid #fff;
		margin-top: 32rpx;
		
	}
	.bcon3
	{
		width: 100%;
		height: 460rpx;
		background-color: #276EFF;
		display: flex;
		flex-direction: column;
		/* 		justify-content: center; */
		align-items: center;
	}
	.bottom-bar
	{
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	    height: 60px;
	    background-color: #ffffff;
	    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
	    z-index: 1000;
	}
	
	.action-button 
	{
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    width: 80px;
	    cursor: pointer;
	    padding: 5px 0;
	}
	
	.icon-container 
	{
	    width: 24px;
	    height: 24px;
	    margin-bottom: 4px;
	}
	
	.icon-image 
	{
	    width: 100%;
	    height: 100%;
	}
	
	.button-text 
	{
	    font-size: 12px;
	    color: #333333;
	}
	.root-container {
	    min-height: 100vh;
	    padding-bottom: 60px; /* 与底部导航栏高度一致，预留空间 */
	    box-sizing: border-box;
	    background-color: #f2f4f7;
	}
</style>